<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="../../../css/mdb.min.css" rel="stylesheet">



    <style>

    </style>

</head>

<body class="mdb-skin">


    <!--Navigation-->
    <header>

        <!--Navbar-->
        <nav class="navbar navbar-dark navbar-fixed-top scrolling-navbar">

            <!-- Collapse button-->
            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
            <i class="fa fa-bars"></i></button>

            <div class="container">

                <!--Collapse content-->
                <div class="collapse navbar-toggleable-xs" id="collapseEx">
                    <!--Navbar Brand-->
                    <a class="navbar-brand" href="http://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">BrandFlow</a>
                    <!--Links-->
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#best-features">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#examples-of-use">Examples</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#testimonials">Testimonials</a>
                        </li>

                    </ul>

                    <!--Navbar icons-->
                    <ul class="nav navbar-nav float-xs-right">
                        <li class="nav-item active">
                            <a class="nav-link" href="#"><i class="fa fa-envelope"></i>  Contact</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
                            <div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-gear"></i>  Settings</a>
                        </li>
                    </ul>

                </div>
                <!--/.Collapse content-->

            </div>

        </nav>
        <!--/.Navbar-->

    </header>
    <!--/Navigation-->

    <!--Main layout-->
    <main class="pt-6">
        <div class="container">

            <!--Section: Product intro-->
            <section class="section section-blog-fw">

                <!--First row-->
                <div class="row">
                    <div class="col-md-12 wow fadeInUp">
                        <!--Featured image-->
                        <img src="http://mdbootstrap.com/wp-content/uploads/2016/05/updatepro-min-1.jpg">

                        <!--Post data-->
                        <div class="jumbotron wow fadeInUp" data-wow-delay="0.2s">
                            <h1 class="h1-responsive">BrandFlow software</h1>
                            <hr class="m-b-1">
                            <p>Short description</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maiores dicta, illo ullam reiciendis sed, ab recusandae et perferendis in, distinctio, harum molestias eum quasi totam enim! Quibusdam, iure ipsa.</p>
                            <a href="" class="btn btn-primary"><i class="fa fa-user left"></i> <span class="hidden-sm-down">Sign up for free</span></a>

                        </div>
                        <!--/Post data-->

                    </div>
                </div>
                <!--/First row-->

            </section>
            <!--/Section: Product intro-->

            <hr class="between-sections">


            <!--Section: Features v.3-->
            <section class="section feature-box">

                <!--Section heading-->
                <h1 class="section-heading">Why is it so great? v.3</h1>
                <!--Section sescription-->
                <p class="section-description lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row features-small">

                    <!--First column-->
                    <div class="col-md-5 mb-r center-on-small-only">
                        <img src="http://mdbootstrap.com/wp-content/uploads/2016/07/img-2-min.jpg" alt="" class="z-depth-0">
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7 center-on-small">
                        <!--First row-->
                        <div class="row">
                            <div class="col-xs-1">
                                <i class="fa fa-bank indigo-text"></i>
                            </div>
                            <div class="col-xs-10">
                                <h4 class="feature-title">Safety</h4>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            </div>
                        </div>
                        <!--/First row-->

                        <div style="height:50px"></div>

                        <!--Second row-->
                        <div class="row">
                            <div class="col-xs-1">
                                <i class="fa fa-code indigo-text"></i>
                            </div>
                            <div class="col-xs-10">
                                <h4 class="feature-title">Technology</h4>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            </div>
                        </div>
                        <!--/Second row-->

                        <div style="height:50px"></div>

                        <!--Third row-->
                        <div class="row">
                            <div class="col-xs-1">
                                <i class="fa fa-money indigo-text"></i>
                            </div>
                            <div class="col-xs-10">
                                <h4 class="feature-title">Finance</h4>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            </div>
                        </div>
                        <!--/Third row-->
                    </div>
                    <!--/Second column-->
                </div>
                <!--/First row-->

            </section>
            <!--/Section: Features v.3-->


        </div>
    </main>
    <!--/Main layout-->






    <!--Footer-->
    <footer class="page-footer center-on-small-only">

        <!--Footer Links-->
        <div class="container-fluid">
            <div class="row">

                <!--First column-->
                <div class="col-md-3 offset-md-1">
                    <h5 class="title">ABOUT MATERIAL DESIGN</h5>
                    <br>
                    <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>

                    <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
                </div>
                <!--/.First column-->

                <hr class="hidden-md-up">

                <!--Second column-->
                <div class="col-md-2 offset-md-1">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Second column-->

                <hr class="hidden-md-up">

                <!--Third column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Third column-->

                <hr class="hidden-md-up">

                <!--Fourth column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Fourth column-->

            </div>
        </div>
        <!--/.Footer Links-->

        <hr>

        <!--Call to action-->
        <div class="call-to-action">
            <ul>
                <li>
                    <h5>Register for free</h5></li>
                <li><a href="" class="btn btn-danger">Sign up!</a></li>
            </ul>
        </div>
        <!--/.Call to action-->

        <hr>

        <!--Social buttons-->
        <div class="social-section">
            <ul>
                <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                <li><a href="https://www.linkedin.com/in/michal-szymanski-9228918a" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                <li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                <li><a href="https://www.instagram.com/mdbootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>
        </div>
        <!--/.Social buttons-->

        <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

            </div>
        </div>
        <!--/.Copyright-->

    </footer>
    <!--/.Footer-->

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="../../../js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

    <script>
        new WOW().init();
    </script>


</body>

</html>